<script src="../../../../../../protects/guangxifupin-front/src/containers/App/index.jsx"></script>
<template>
  <div class="padding-middle">
    <el-card :body-style="{padding:'0px'}">
      <div class="search">
        <div class="input" style="display: none">
          <el-input v-model="input" size="small" placeholder="请输入内容" style="width: 300px;height: 20px;margin-right: 15px"/>
          <el-button style="margin-left: 15px" plain size="small" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </div>
        <div class="edit">
          <router-link to="/user/distributionCourse/edit"><el-button type="success" size="small">分配课程</el-button></router-link>
        </div>
      </div>
      <el-table
        :data="items"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="150"/>
        <el-table-column
          prop="username"
          label="用户名"/>
        <el-table-column
          prop="mobile"
          label="联系电话"/>
        <el-table-column
          prop="examType"
          label="课程类别"/>
        <el-table-column
          :formatter="toTime"
          prop="createTime"
          label="购买时间"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--<el-button type="text" size="small">查看</el-button>-->
            <router-link :to="'/user/distributionCourse/edit/' + scope.row.id + '/'+ scope.row.username + '/' + scope.row.examType"><el-button size="small" type="text">编辑</el-button></router-link>
            <el-button size="small" type="text" @click="deleteUserCourse(scope.row)">取消课程</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="page" :page-size="10" :total="total" background layout="prev, pager, next" @current-change="sizeChange"/>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        title="取消课程"
        width="30%">
        <p style="text-align: center">
          <span>你确定取消<span style="color: red">{{ name }}</span>的<span style="color: red">{{ examType }}</span>课程吗？</span>
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import axios from 'axios'
  import Unix from '@/utils/unix'
export default {
  data() {
    return {
      page: 1,
      total: 0,
      dialogVisible: false,
      name:'',
      examType:'',
      size: 10,
      input:'',
      items: [],
      option1:'',
      option2:'',
      options1: [],
      options2:[],
      params: {
        userId: '',
        examType: ''
      }
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() {
      axios.get(`/getUserCourseList/${'all'}/${this.page}/${this.size}`).then(res => {
        if (res.success) {
          this.items = res.data
          this.total = res.total
        }
      })
    },
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    },
    clickSearch() {
      alert('查询')
    },
    sizeChange(page) {
      this.page=page
      this.queryList()
    },
    deleteUserCourse(data) {
      this.name = data.username
      this.examType = data.examType
      this.params.userId = data.userId
      this.params.examType = data.examType
      this.dialogVisible = true
    },
    handleClose(done) {
      done()
    },
    submit(){
      axios.post(`/deleteUserCourse`,this.params).then(res => {
        if (res.success) {
          this.dialogVisible = false
          this.queryList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .cover {
    width: 100px;
    height: 75px;
    box-shadow: 2px 2px 2px #eee;
  }
  .search{
    background-color: #fff;
    height: 60px;
    display: flex;
    padding: 15px 10px;
    box-sizing: border-box;
    .input{
      flex: 8;
    }
    .edit{
      flex: 2;
      text-align: right;
      padding-right: 10px;
    }
  }
</style>
